// webpack.config.js
// 用来把 js、css 插入 模板html
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");

const postcssOpts = {
  ident: "postcss", // https://webpack.js.org/guides/migrating/#complex-options
  plugins: () => [
    autoprefixer({
      browsers: [
        "last 2 versions",
        "Firefox ESR",
        "> 1%",
        "ie >= 8",
        "iOS >= 8",
        "Android >= 4"
      ]
    })
    // pxtorem({ rootValue: 100, propWhiteList: [] })
  ]
};

module.exports = {
  // 开发模式
  mode: "development",

  devtool: "source-map", // or 'inline-source-map'
  // 入口 js
  // entry: "./src/index.js",
  entry: ["babel-polyfill", "webpack/hot/dev-server", "./src/index.js"],

  // 产出结果
  output: {
    // 产出文件名
    filename: "bundle.js",

    // 产出目录
    path: __dirname + "/dist"
  },
  devServer: {
    historyApiFallback: true,
    proxy: {
      "/api": {
        target: "https://www.ydhwh.cn",
        changeOrigin: true,
        secure: false
        // pathRewrite: { "^/api": "/api" }
      }
    }
  },
  // 对各种文件类型（模块）进行处理
  module: {
    rules: [
      {
        // 对以 `.js` 结尾的文件使用 `babel-loader` 处理
        // `babel-loader` 会自动加载`babel.config.js` 配置文件
        test: /\.js|jsx$/,
        use: "babel-loader",

        // 排除 `node_modules` 目录，不对它做处理
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
        // include: path.resolve(src)
      }

      ////////////////////////////////////

      // {
      //   test: /\.js|jsx$/,
      //   exclude: /node_modules/,
      //   loader: "babel-loader",
      //   options: {
      //     plugins: [
      //       "external-helpers", // why not work?
      //       ["transform-runtime", { polyfill: true }],
      //       ["import", [{ style: "css", libraryName: "antd-mobile" }]]
      //     ],
      //     presets: ["es2015", "stage-0", "react"]
      //     // presets: [['es2015', { modules: false }], 'stage-0', 'react'] // tree-shaking
      //   }
      // },
      // { test: /\.(jpg|png)$/, loader: "url-loader?limit=8192" },
      // // 注意：如下不使用 ExtractTextPlugin 的写法，不能单独 build 出 css 文件
      // // { test: /\.less$/i, loaders: ['style-loader', 'css-loader', 'less-loader'] },
      // // { test: /\.css$/i, loaders: ['style-loader', 'css-loader'] },
      // {
      //   test: /\.less$/i,
      //   use: ExtractTextPlugin.extract({
      //     fallback: "style-loader",
      //     use: [
      //       "css-loader",
      //       { loader: "postcss-loader", options: postcssOpts },
      //       "less-loader"
      //     ]
      //   })
      // },
      // {
      //   test: /\.css$/i,
      //   use: ExtractTextPlugin.extract({
      //     fallback: "style-loader",
      //     use: [
      //       "css-loader",
      //       { loader: "postcss-loader", options: postcssOpts }
      //     ]
      //   })
      // },
      // {
      //   test: /\.scss$/,
      //   use: ["style-loader", "css-loader", "sass-loader"]
      //   // include: path.resolve(src)
      // }
    ]
    // loaders: [
    //   {
    //     test: /\.css$/,
    //     use: ExtractTextPlugin.extract({
    //       fallback: "style-loader",
    //       use: "css-loader"
    //     })
    //   },
    //   { test: /\.png$/, loader: "file-loader" }
    // ]
  },
  plugins: [
    // 使 产出结果自动插入 自定义模板 html文件
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.html"
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};
